// 导入vue
import Vue from 'vue';
// 导入 vue-router js
import VueRouter from "vue-router";
// 把VueRouter作为vue的插件安装上去
Vue.use(VueRouter);


// 导入表示页面的组件,@ 就表示 src 目录
import Login from "@/pages/Login"; // .vue 是可以省略的
import Main from "@/pages/Main";
import User from "@/pages/User";
import UserEdit from "@/pages/UserEdit";
import UserView from "@/pages/UserView";

// 定义路由表
const routes=[
    // 每一个组件和地址之间的对应关系，就是一个js对象
    {
        path: "/login",  // 路由的路径
        component: Login // 路由对应的页面组件
    },
    {
        path: "/",  // 路由的路径
        component: Main // 路由对应的页面组件
    },
    {
        path: "/user",  // 路由的路径
        component: User, // 路由对应的页面组件,
        children:[
            {
                // :id 表示一个动态值
                path: "edit/:id",  // 路由的路径
                component: UserEdit // 路由对应的页面组件
            },
            {
                path: ":id",  // 路由的路径
                component: UserView // 路由对应的页面组件
            },
        ]
    },

];

// 创建路由器对象，要传入路由表（便于路由器通过路由表来明确路径和组件之间的对应关系）
const router = new VueRouter({
    // 默认是通过 #/login来确定路径，如果配置为history, 路径直接就是/xx就可以了
    mode: 'history',
    // routes: routes
    routes
});

// 导出
export default router;